<template>
  <div class="m-print">
    <button class="print-btn"></button>
    <i class="print-close" @click="$router.go(-1)">&times;</i>
    <div class="print-ct">
      <table>
        <caption>{{storeInfo.storeName}}</caption>
        <thead>
          <tr>
            <td class="tl" colspan="3">下单时间：{{orderInfo.addTime || '无'}}</td>
            <td class="tr" colspan="3">订单号：{{orderInfo.orderId || '无'}}</td>
          </tr>
        </thead>
        <tbody>
          <tr class="resume">
            <td colspan="3" class="tl">
              <p>收货人：{{orderInfo.receiverName || '无'}}</p>
              <p>所在地：{{orderInfo.receiverArea}}{{orderInfo.receiverAreaInfo}}</p>
              <!-- <p>所在地：浙江杭州市余杭区梧桐街道永兴路288号302室</p> -->
            </td>
            <td colspan="3" class="tr">
              <p>电话：{{orderInfo.receiverTelephone || '无'}}</p>
              <p>手机：{{orderInfo.receiverMobile || '无'}}</p>
              <!-- <p>手机：13000000000</p> -->
            </td>
          </tr>
        </tbody>
        <tbody class="order">
          <tr class="hd">
            <td>序号</td>
            <td>备注</td>
            <td>规格</td>
            <td>单价（元）</td>
            <td>数量</td>
            <td>小计</td>
          </tr>
          <tr class="ct" v-if="orderInfo.goodsInfo" v-for="(goods, index) in orderInfo.goodsInfo" :key="index">
            <td>{{index + 1}}</td>
            <td>{{goods.goods_name}}</td>
            <td class="sku">
              <p v-for="gsp in goods.goodsGsp">
                <span v-for="(name, index) in gsp.goodsSpecName" :key="index">{{`${name}：${gsp.goodsSpecContent[index]}`}}</span>
              </p>
            </td>
            <td>
              <p v-for="gsp in goods.goodsGsp">￥{{gsp.goodsSinglePrice.toFixed(2)}}</p>
            </td>
            <td>
              <p v-for="gsp in goods.goodsGsp">{{gsp.count}}</p>
            </td>
            <td>￥{{getGoodsPrice(goods.goodsGsp)}}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4" class="total">合计：{{chineseWord}}</td>
            <td class="count">{{totalCount}}</td>
            <td class="total-num">合计：{{orderInfo.goodsAmount}}元</td>
          </tr>
        </tfoot>
      </table>
      <div class="result">
        <span>商品总价：{{orderInfo.goodsAmount || 0}}元</span>
        <span>运费：{{orderInfo.shipPrice || 0}}元</span>
        <span>优惠：{{orderInfo.preferentialAmount || 0}}元</span>
        <span>订单总额：{{orderInfo.totalPrice || 0}}元</span>
      </div>
    </div>
  </div>
</template>

<script>
// 导入获取订单详情列表
import { apiOrder } from '../../common/api'

// 导入工具类转换金额
import { convertCurrency } from '../../common/util'

export default {
  data() {
    return {
      orderInfo: {},
      storeInfo: JSON.parse(sessionStorage.getItem('storeInfo'))
    }
  },
  created() {
    this.handlerPrintOrder()
  },
  computed: {
    chineseWord() {
      if (this.orderInfo.goodsAmount) {
        return convertCurrency(this.orderInfo.goodsAmount)
      }
      return ''
    },
    totalCount() {
      let count = 0
      if (!this.orderInfo.goodsInfo) {
        return 0
      }
      this.orderInfo.goodsInfo.forEach(v => {
        count += v.goodsTotalcount
      })
      return count
    }
  },
  methods: {
    handlerPrintOrder() {
      apiOrder.printOrder(this.$route.params.id).then((data) => {
        this.orderInfo = data

        // 将商品信息格式化成对象
        this.orderInfo.goodsInfo = JSON.parse(this.orderInfo.goodsInfo)
      })
    },

    /**
     * 获取商品的价格
     */
    getGoodsPrice(goods) {
      let price = 0
      goods.forEach(v => {
        price += Number(v.goodsPrice || '0')
      })
      return price
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  table {
    border-collapse: collapse;
  }
  .tl {
    text-align: left;
  }
  .tr {
    text-align: right;
  }
  .sku {
    text-align: left !important;
    padding-left: 20px !important;

    span {
      margin-right: 10px;
    }
  }
  .m-print {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 35;
    background: #4b4b4b;
  }
  .print-ct {
    position: absolute;
    left: 10%;
    top: 15%;
    width: 80%;
    padding: 40px;
    background: #fff;
    table {
      width: 100%;
    }
    caption {
      font-size: 34px;
      text-align: center;
    }
    thead {
      td {
        padding: 12px 0;
        border-bottom: 1px solid $border-color-dark;
      }
    }
    .order {
      td {
        padding: 12px 0;
        text-align: center;
        border: 1px solid $border-color-dark;
      }
      .ct {
        font-weight: 600;
        font-size: $color-black;
      }
    }
    tfoot {
      td {
        text-align: center;
        padding: 10px 0;
        border: 1px solid $border-color-dark;
      }
      .total {
        padding-left: 20px;
        font-size: 16px;
        font-weight: 600;
        text-align: left;
        border-right: 0;
      }
      .count {
        font-weight: 600;
        border-left: 0;
        border-right: 0;
      }
      .total-num {
        border-left: 0;
        font-size: 16px;
        font-weight: 600;
      }
    }
    .resume {
      td {
        padding: 10px 0;
      }
      p {
        line-height: 26px;
      }
    }
    .result {
      padding: 20px 0;
      border-bottom: 1px solid $border-color-dark;
      span {
        margin-right: 6%;
      }
    }
  }
  .print-btn {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 35px;
    height: 30px;
    background: url('./ico_print.png');
  }
  .print-close {
    position: absolute;
    right: 5%;
    top: 5%;
    width: 35px;
    height: 30px;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
  }
</style>